<template>
  <div class="home">
     <input type="text" v-model="txt">
     <div>{{txt}}--{{num}}</div>
  </div>
</template>

<script>
// @ is an alias to /src
import { ref, reactive, toRefs } from 'vue';
export default {
  name: 'Home',
  components: {

  },
  // props:{
  //   number: Number
  // },
  // 组合api的意思是 变量 和 函数写在一块。

  // ref 我们一般用它来声明 基本的数据类型 reactive 用来声明引用的数据类型
  setup(props,ctx) { // setup 里面没有了this指向 props 获取子传父里面的所有值 ctx 指的就是 当前组件的上下文
    // ctx.emit()
    const txt = ref('');
    const data = reactive({
      num: 10
    })
    return {
      txt,
      ...toRefs(data)
    }
  }
}
</script>
